<template>
  <div class="adminRole">
    <el-form ref="formRef" :inline="true" :model="form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
      <el-form-item label="站点名称：" prop="stationname">
        <el-input v-model="form.stationname" placeholder="请输入站点名称" clearable class="!w-[230px]" />
      </el-form-item>
      <el-form-item label="X轴：" prop="x">
        <el-input v-model="form.x" placeholder="请输入X" clearable class="!w-[230px]" />
      </el-form-item>
      <el-form-item label="Y轴：" prop="y">
        <el-input v-model="form.y" placeholder="请输入Y" clearable class="!w-[230px]" />
      </el-form-item>
      <el-form-item label="站点类型：" prop="stationtype">
        <el-select v-model="form.stationtype" placeholder="请选择类型" class="!w-[230px]">
          <el-option v-for="item in stationTypes" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-select v-model="form.status" clearable class="!w-[230px]">
          <el-option label="全部" :value="''" />
          <el-option label="启用" :value="1" />
          <el-option label="禁用" :value="0" />
          <el-option label="锁定" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="useRenderIcon(Search)" :loading="loading" @click="onSearch">
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <PureTableBar title="站点管理" :columns="columns" @refresh="onSearch">
      <template #buttons>
        <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog()">
          新增站点
        </el-button>
      </template>
      <template v-slot="{ size, dynamicColumns }">
        <pure-table ref="tableRef" adaptive row-key="Id" showOverflowTooltip table-layout="auto"
          :loading="loading" :size="size" :data="dataList" :columns="dynamicColumns" :pagination="pagination"
          :paginationSmall="size === 'small' ? true : false" :header-cell-style="{
          background: 'var(--el-fill-color-light)',
          color: 'var(--el-text-color-primary)'
        }" @page-size-change="handleSizeChange" @page-current-change="handleCurrentChange">
          <template #operation="{ row }" align-whole="right">
            <el-button class="reset-margin" link type="success" :size="size" v-if="row.status === 0 || row.status === 2" :icon="useRenderIcon(Check)" @click="stationEnable(row)">
              启用
            </el-button>
            <el-button class="reset-margin" link type="primary" :size="size" :icon="useRenderIcon(EditPen)"
              @click="stationUpdate(row?.id)">
              编辑
            </el-button>
            <el-button class="reset-margin" link type="danger" :size="size" :icon="useRenderIcon(outlineDelete)"
              @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>
</template>

<script lang='ts' setup>
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useDept } from "./utils/hook";
import { ref } from 'vue'
import { getStation, updateStation } from '@/utils/api/dispatch/station'
import { message } from "@/utils/message";
import { ElMessageBox } from 'element-plus'

// iconify-icons
import AddFill from "@iconify-icons/ri/add-circle-line";
import EditPen from "@iconify-icons/ep/edit-pen";
import outlineDelete from '@iconify-icons/ic/outline-delete';
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import Check from "@iconify-icons/ep/Check";

const formRef = ref();

// 站点启用
function stationEnable(data){
  ElMessageBox.confirm(
    `是否确认启用该站点?`,
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
    }
  ).then(() => {
    data.status = 1
    updateStation(data).then(res=>{
      if(res.Code === 0){
        message(`启用成功`, {
          type: "success"
        });
        onSearch()
      }
    })
  }).catch(() => { })
  
}

// 站点编辑
async function stationUpdate(id: number) {
  let { Content } = await getStation(id)
  //@ts-ignore
  openDialog('编辑', Content)
}

const {
  columns,
  loading,
  dataList,
  openDialog,
  handleDelete,
  form,
  onSearch,
  resetForm,
  pagination,
  handleSizeChange,
  handleCurrentChange,
  stationTypes
} = useDept();

</script>

<style lang="scss" scoped>
.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}

</style>